<template>
	<view>
		<u-gap></u-gap>
		<view class="content">
			<view class="item" v-for="(item,index) in sex" @click="choiceSex(index)" :key="index">
				<view class="name">{{item.name}}</view>
				<u-checkbox v-model="item.check" shape="circle" active-color="#FF4E46"></u-checkbox>
			</view>
		</view>
		<view class="btn" @click="confirm">
			确定
		</view>
	</view>
</template>

<script>
import {appletImgUrl} from "@/common/config.js"
	export default {
		data() {
			return {
				appletImgUrl:appletImgUrl,
				sex: [{
						name: '男',
						check: false
					},
					{
						name: '女',
						check: false
					},
					{
						name: '保密',
						check: true
					}
				]
			};
		},
		onLoad() {
			if (uni.getStorageSync('userInfo').sex) {
				this.sex.forEach(item => {
					item.check = false
				})
				this.sexIndx = this.sex.findIndex(item => item.name == uni.getStorageSync('userInfo').sex)
				this.sex[this.sexIndx].check = true
				return
			}
			this.sexIndx = 2
		},
		methods: {
			async confirm() {
				if (this.sex[this.sexIndx].name == uni.getStorageSync('userInfo').sex) {
					uni.showToast({
						title: '性别相同，换个性别吧',
						icon: 'none'
					})
					return
				}
				await this.$u.post('user/info/update', {
					sex: this.sex[this.sexIndx].name
				})
				let userInfo = await this.$u.get('user/info')
				if(userInfo.headPhoto){
					if(userInfo.headPhoto.indexOf("https") != 0){
						userInfo.headPhoto = this.imageURL + userInfo.headPhoto
					}
				}else{
					userInfo.headPhoto = this.appletImgUrl+'logo.png'
				}
				uni.showToast({
					title: '修改成功'
				})
				uni.setStorageSync('userInfo', userInfo)
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			},
			choiceSex(index) {
				this.sex.forEach(item => {
					item.check = false
				})
				this.$set(this.sex[index], 'check', true)
				this.sexIndx = index
			}
		}
	}
</script>

<style lang="scss">
	.btn {
		line-height: 100rpx;
		margin: 0 30rpx;
		margin-top: 350rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
		background: linear-gradient(90deg, #FF3868, #FC6161);
		box-shadow: 1px 10px 15px 2px rgba(255, 78, 70, 0.3);
		border-radius: 20rpx;
	}

	.content {
		background-color: #FFFFFF;
		margin: 0 30rpx;
		border-radius: 20rpx;
		padding: 0 30rpx;
		padding-right: 0;
	}

	.item {
		display: flex;
		padding: 30rpx 0;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #E1E0E0;

		&:last-child {
			border-bottom: none;
		}
	}

	page {
		background-color: #f7f7f7;
	}
</style>
